<template>
    <div>
        <p style="font-weight: bold; font-size: 16px">{{ title }}</p>
        <div class="header">
            <div style="max-width: 400px;">
                <p class="title">详情图</p>
                <el-space wrap>
                    <el-image v-for="(item, index) in data.img_url_arr" :key="index" style="width: 70px; height: 70px"
                        :src="item" fit="cover" />
                </el-space>
            </div>
            <div class="middle">
                <div>
                    <p class="title">综合评分</p>
                    <p class="value" style=" font-size: 20px;">{{ data.score }}</p>
                </div>

                <div>
                    <p class="title">参考报价</p>
                    <p class="value" style="color: red; font-size: 18px;">￥{{ data.price }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const { data, title } = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    title: {
        type: String,
        default: ''
    }
})
</script>

<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-image {
        padding: 5px;
        border: 0.5px solid #e0e0e0;
        border-radius: 5px;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
    }

    .middle {
        display: flex;
        flex-direction: column;
        align-items: center;



        .value {
            font-weight: bold;
            text-align: center;
        }

    }
}
</style>